<template>
  <div style="height:100%;" ref="meeting">
    <FullCalendar
      v-if="isShow"
      class='app-calendar'
      ref="fullCalendar"
      :options='calendarOptions'
    >
    </FullCalendar>
  </div>
</template>

<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import { getAction } from '@/api/manage'
import { mapGetters } from 'vuex'
import moment from 'moment'
export default {
  name: 'Meeting',
  components: {
    FullCalendar
  },
  props: ['edit'],
  data() {
    return {
      isShow: false,
      calendarOptions: {
        contentHeight: 300,
        plugins: [
          dayGridPlugin
        ],
        buttonText: {
          today: '今天'
        },
        headerToolbar: {
          left: 'prev,today,next',
          center: 'title',
          right: ''
          // right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        eventTimeFormat: {
          hour: '2-digit',
          minute: '2-digit',
          meridiem: false,
          hour12: false// 设置时间为24小时
        },
        initialView: 'dayGridMonth',
        nextDayThreshold: '00:00:00',
        events: [
          // {
          //   title: 'All-day event222',
          //   start: new Date().toISOString().replace(/T.*$/, '')
          // },
          // {
          //   title: 'Timed event11',
          //   start: new Date().toISOString().replace(/T.*$/, '') + 'T01:00:00'
          // },
          // {
          //   title: 'Timed event22',
          //   start: new Date().toISOString().replace(/T.*$/, '') + 'T02:00:00'
          // },
          // {
          //   title: 'Timed event22',
          //   start: new Date().toISOString().replace(/T.*$/, '') + 'T03:00:00'
          // },
          // {
          //   title: 'Timed event22',
          //   start: new Date().toISOString().replace(/T.*$/, '') + 'T04:00:00'
          // }
        ],
        selectable: true,
        selectMirror: true,
        weekends: true,
        dayMaxEvents: true,
        datesSet: this.handleDatesRender,
        locale: 'zh-cn',
        firstDay: '1',
        weekNumberCalculation: 'ISO',
        // eventLimit: true,
        views: {
          agenda: {
            eventLimit: 1
          }
        }
      },
      transform: '',
      url: {
        list: '/online/cgreport/api/getColumnsAndData/1444941634411307009'
      },
      startStr: '',
      endStr: ''
    }
  },
  watch: {
    edit(val) {
      if (val) {
        const parentNode = this.$parent.$el.parentNode
        parentNode.style.transform = this.transform
        parentNode.style['margin-top'] = '0px'
        parentNode.style['margin-left'] = '0px'
      } else {
        this.clearTransform()
      }
    },
    $route(to) {
      if (to.fullPath === '/dashboard/analysis') {
        this.setHeight()
      }
    }
  },
  methods: {
    ...mapGetters(['userInfo']),
    clearTransform() {
      const parentNode = this.$parent.$el.parentNode
      // let transform = window.getComputedStyle(parentNode)['transform']
      let transform = parentNode.style.transform
      this.transform = transform
      transform = transform.replace('translate3d(', '')
      transform = transform.replace(')', '')
      transform = transform.split(',')
      parentNode.style['margin-top'] = transform[1]
      parentNode.style['margin-left'] = transform[0]
      parentNode.style.transform = 'none'
    },
    handleDatesRender(dateInfo) {
      const startStr_ = moment(dateInfo.startStr).format('YYYY-MM-DD') + ' 00:00:00'
      const endStr_ = moment(dateInfo.endStr).format('YYYY-MM-DD') + ' 23:59:59'
      if (this.startStr !== startStr_ || this.endStr !== endStr_) {
        this.startStr = startStr_
        this.endStr = endStr_
        this.loadData()
      }
    },
    loadData() {
      getAction(this.url.list, {
        self_attendances: this.userInfo().username,
        self_starttime: this.startStr,
        self_endtime: this.endStr,
        pageNo: 1,
        pageSize: 9999
      }).then(res => {
        if (res.success) {
          const data = []
          res.result.data.records.forEach(item => {
            const obj = {
              title: item.meeting_name,
              start: item.start_time,
              end: item.end_time
            }
            data.push(obj)
          })
          this.calendarOptions.events = data
        }
      })
    },
    setHeight() {
      setTimeout(() => {
        this.calendarOptions.contentHeight = (this.$refs['meeting'].offsetHeight - 60) || 300
        this.clearTransform()
      }, 500)
    }
  },
  mounted() {
    this.setHeight()
    this.$nextTick(() => {
      this.isShow = true
    })
  }
}
</script>
<style>
.fc .fc-toolbar.fc-header-toolbar {
  margin-bottom: 13px !important;
}
.vue-resizable{
  margin-left: 0px !important;
  margin-top: 0px !important;
}
</style>
<style scoped>
.meeting-warp{
  height: 100%;
}

.app-calendar{
  /* width: 100%; */
}
.calendar-main{
  /* width: 100%; */
}
</style>
